<script setup lang="ts">
/**
 * @用途
 * @author bear
 * @创建时间 2025/10/24
 **/
import { mdiImage, mdiImageBrokenVariant } from '@mdi/js'

interface VImg {
  naturalWidth: number
  naturalHeight: number
}

defineProps<{ url: string; rounded?: boolean | number | string; size?: number }>()
const emit = defineEmits<{
  (e: 'click', val: { width: number; height: number }): void
}>()
const imgRef = ref<VImg | null>(null)
const natural_size = reactive({ width: 0, height: 0 })

function load() {
  if (imgRef.value) {
    natural_size.width = imgRef.value.naturalWidth
    natural_size.height = imgRef.value.naturalHeight
  }
}

function error() {
  console.log('error')
}

function clickImg() {
  emit('click', natural_size)
}
</script>

<template>
  <v-avatar :rounded="rounded || 0" :size="size || 120">
    <v-img
      ref="imgRef"
      class="position-relative"
      cover
      :src="url"
      @click="clickImg"
      @error="error"
      @load="load"
    >
      <div class="position-absolute top-0 left-0" style="font-size: 10px">
        {{ natural_size.width + '×' + natural_size.height }}
      </div>
      <template #placeholder>
        <v-icon color="grey-lighten-1" :icon="mdiImage" :size="size || 120" />
      </template>
      <template #error>
        <v-icon color="grey-lighten-1" :icon="mdiImageBrokenVariant" :size="size || 120" />
      </template>
    </v-img>
  </v-avatar>
</template>

<style scoped></style>
